import { useState } from 'react';
import style from './ListGroup.module.css';
import styled from 'styled-components';

const List = styled.li<itemProps>`
  list-style: none;
  background-color: ${props => (props.active ? '#f2f2f2' : 'red')};
`;

interface Props {
  list: string[];
  title: string;
  fClick: (item: string) => void;
}

interface itemProps {
  active: boolean;
}

function ListGroup({ list, title, fClick }: Props) {
  const [clickIndex, setClickIndex] = useState(-1);

  const showList = () => {
    return list.map((item, index) => (
      <List
        active={index === clickIndex}
        className={`${style['list-group-item']} ${clickIndex === index ? style.active : ''}`}
        style={{ color: 'red' }}
        key={index}
        onClick={() => {
          setClickIndex(index);
          fClick(item);
        }}
      >
        {item}
      </List>
    ));
  };

  return (
    <>
      <h1>{title}</h1>
      <ul className={`${style.ListGroup} ${style.active}`}>{showList()}</ul>
    </>
  );
}

export default ListGroup;
